<template>
  <div class="chat_box">
    <div v-if="count < 1" class="not_gift_list">
      <span>展现本场直播送礼信息</span>
    </div>
    <el-scrollbar
      v-else
      ref="scrollbargiftRef"
      style="width: 100%; height: 200px"
      class="gift_list"
    >
      <!-- v-infinite-scroll="load"  -->
      <ul ref="innergiftRef" class="infinite-list">
        <li v-for="i in count" :key="i" class="infinite-list-item">
          <div class="li_item">
            <div style="flex: 1">
              <div class="title_div">
                <img src="@/assets/live/WealthLevel.png" alt="" />
              </div>
              <div class="label_div">
                <span class="form_span">桃子姐姐</span>
                <span class="give_span">给</span>
                <span class="anchor_span">主播</span>
                <span class="present_span">赠送了</span>
                <span class="gift_span">爱心沙滩{{ i }}</span>
              </div>
            </div>
            <div>
              <img style="margin-left: 6px" src="@/assets/live/penquan.png" alt="" />
              <img src="@/assets/live/X1.png" alt="" />
            </div>
          </div>
        </li>
      </ul>
    </el-scrollbar>
    <div class="line"></div>
    <div class="comments_div">
      <span>评论数：0条</span>
    </div>
    <div v-for="i in count1" :key="i" class="simple_div">
      <div class="welcome_div">
        <span class="welcome_span">欢迎</span>
        <span class="user_span">XXX</span>
        <span class="welcome_span">来到直播间</span>
      </div>
    </div>
    <div class="vip_div">
      <img src="@/assets/live/penquan.png" alt="" />
      <div class="welcome_div">
        <div>
          <img src="@/assets/live/WealthLevel.png" style="width: 56px" alt="" />
        </div>
        <div>
          <span class="welcome_span">欢迎</span>
          <span class="user_span">XXX</span>
          <span class="welcome_span">来到直播间</span>
        </div>
      </div>
    </div>
    <div class="tips_div">
      <span>
        提示文案：燃欲倡导绿色直播，禁止传播任何违法、违规、低俗等相关的内容，一经发现将予以封号处理。请通过官方渠道进行充值，勿轻信任何私下交易行为，所有通过违规代充、代刷产生的非法资金，燃欲有权进行回收并保留报警追究的权利，请欲友们警惕此类诈骗行为，避免损失！请您适度健康消费，谨防诱导打赏，平台严禁未成年人打赏
      </span>
    </div>
    <el-scrollbar ref="scrollbarRef" style="width: 100%" class="chat_list">
      <ul ref="innerRef" class="infinite-chat-list">
        <li v-for="i in count2" :key="i" class="infinite-chat-list-item">
          <div style="width: 100%">
            <div class="li_chat_item">
              <div>
                <img src="@/assets/live/penquan.png" style="width: 40px" alt="" />
              </div>
              <div>
                <div>
                  <span style="height: 20px; line-height: 40px; margin-left: 10px; color: #fff">
                    汪汪叫
                  </span>
                </div>
              </div>
            </div>
            <div
              style="
                left: 50px;
                background: rgba(0, 0, 0, 0.3);
                border-radius: 4px 10px 10px 10px;
                color: #fff;
                padding: 0 10px;
                line-height: 26px;
                margin-left: 50px;
                margin-top: -24px;
              "
            >
              <span>这么好的人，怎么就怎么了呢？这么好的人，怎么就怎么了呢？{{ i }}</span>
            </div>
          </div>
        </li>
      </ul>
    </el-scrollbar>
    <div class="chat_input">
      <!-- <el-input>
        <template #suffix>
          <el-icon class="el-input__icon">
            <img src="@/assets/live/iconSelect.png" style="width: 30px;margin-right: 10px;" alt="">
          </el-icon>
        </template>
</el-input> -->
      <EmojiPicker
        v-if="showPicker"
        :native="true"
        :group-names="optionsName"
        :disabled-groups="[
          'flags',
          'objects',
          'animals_nature',
          'food_drink',
          'activities',
          'travel_places',
          'symbols',
          'recent',
        ]"
        :display-recent="true"
        :hide-search="true"
        :disable-skin-tones="true"
        theme="auto"
        @select="addEmoji"
      />
      <el-input ref="chatInput" v-model="commentText" placeholder="" @keyup.enter.native="onSubmit">
        <template #suffix>
          <el-icon class="el-input__icon">
            <img
              src="@/assets/live/iconSelect.png"
              style="width: 30px; margin-right: 10px"
              alt=""
              @click="showPicker = !showPicker"
            />
          </el-icon>
        </template>
      </el-input>
      <!-- <el-button @click="showPicker = !showPicker">选择表情</a-button> -->
      <!-- <el-button @click="showPicker = !showPicker">选择表情</el-button> -->
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from "vue";

import EmojiPicker from "vue3-emoji-picker";
// import css
import "vue3-emoji-picker/css";

const count = ref(4);
const count1 = ref(2);
const count2 = ref(10);

const showPicker = ref(false);
const commentText = ref("");
const chatInput = ref(null);
const scrollbargiftRef = ref(null);
const innergiftRef = ref(null);
const optionsName = {
  smileys_people: "微笑与人物",
  animals_nature: "动物与自然",
  food_drink: "食物与饮料",
  activities: "活动",
  travel_places: "旅行与地点",
  objects: "物体",
  symbols: "符号",
  flags: "旗帜",
  recent: "最近使用",
};

const addEmoji = (emoji) => {
  console.log(emoji);
  commentText.value += emoji.i;
  showPicker.value = false;
  if (chatInput.value) {
    chatInput.value.focus();
  }
};

// watch(count2, (newVal, oldVal) => {
//   console.log('值改变了', newVal, oldVal)
//   nextTick(() => {
//     console.log(scrollbarRef.value, 'scroll-auto');
//     nextTick(() => {
//       scrollbarRef.value.setScrollTop(innerRef.value.clientHeight)
//     })
//     // if (scrollbarRef.value) {
//     // scrollbarRef.value.wrap.scrollTop = scrollbarRef.value.wrap.scrollHeight;
//     // }
//   });
// }
// )
const onSubmit = () => {
  // count2.value.push('111')
  count2.value += 1;

  // console.log(commentText.value);
  // commentText.value = '';
};
const scrollbarRef = ref(null);
const innerRef = ref(null);
watch(count2, () => {
  console.log(scrollbarRef.value, "scroll-auto");

  setTimeout(() => {
    scrollbarRef.value.setScrollTop(innerRef.value.clientHeight);
  }, 100);
});
onMounted(() => {
  nextTick(() => {
    console.log(scrollbargiftRef.value, "scroll-auto");
    console.log(innergiftRef.value.clientHeight, "innergiftRef.value.clientHeight");
    nextTick(() => {
      scrollbargiftRef.value.setScrollTop(innergiftRef.value.clientHeight);
    });
  });
});
// const load = () => {
//   count.value += 2;
// };
</script>

<style lang="scss" scoped>
.chat_box {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  // height: calc(100vh - 110px);
  height: 100%;

  .not_gift_list {
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    span {
      color: #747474;
      font-size: 13px;
    }
  }
  .gift_list {
    padding: 0 20px;
    .infinite-list {
      padding: 0;
      margin: 0;
      list-style: none;
    }

    .infinite-list .infinite-list-item {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 65px;
      margin: 10px;
    }

    .infinite-list .infinite-list-item .list-item {
      margin-top: 10px;
    }
  }

  .li_item {
    margin: 20px 0;
    position: relative;
    display: flex;
    flex-direction: row;
    max-width: 350px;
    width: 100%;
    .title_div {
      position: absolute;
      top: 3px;

      img {
      }
    }

    .label_div {
      display: inline-block;
      margin-top: 30px;
    }
  }

  .form_span {
    color: #83e0ff;
  }

  .give_span {
    color: #ffffff;
  }

  .anchor_span {
    color: #ffdf9a;
  }

  .present_span {
    color: #ffffff;
  }

  .gift_span {
    color: #ffdf9a;
  }

  .line {
    margin: 10px 10px;
    height: 1px;
    background: #747474;
    border-radius: 0px 0px 0px 0px;
  }

  .comments_div {
    width: 100%;
    text-align: center;

    span {
      color: #83e0ff;
      font-size: 16px;
    }
  }

  .vip_div {
    margin-left: 10px;
    padding: 0 10px;
    width: 226px;
    height: 56px;
    background:
      linear-gradient(90deg, rgba(101, 207, 184, 0) 0%, #7fdfff 100%),
      linear-gradient(56deg, #7774fd 0%, rgba(255, 114, 129, 0.07) 100%);
    border-radius: 501px 501px 501px 501px;
    display: flex;
    flex-direction: row;
    align-items: center;

    .welcome_div {
      display: flex;
      height: 28px;
      padding: 0 20px;
      line-height: 28px;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      font-size: 12px;

      div {
        height: 30px;
      }

      img {
        margin-top: 10px;
      }

      .welcome_span {
        color: #ffffff;
      }

      .user_span {
        color: #83e0ff;
      }
    }
  }

  .chat_list {
    display: flex;
    padding: 0 20px;
    line-height: 28px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    font-size: 12px;
    flex: 1;
    padding-bottom: 10px;

    ::v-deep .el-scrollbar__wrap {
      height: 100%;
      width: 100% !important;
      overflow: auto;
    }

    .infinite-chat-list {
      .infinite-chat-list-item {
        margin-top: 5px;

        .li_chat_item {
          display: flex;
          flex-direction: row;
          /* align-content: center; */
          align-items: flex-start;
        }
      }
    }

    img {
      margin-top: 10px;
    }

    .welcome_span {
      color: #ffffff;
    }

    .user_span {
      color: #83e0ff;
    }

    .li_item {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 65px;
      margin: 10px;
      color: #fff;
    }
  }

  .chat_input {
    padding: 0 15px;
    margin-bottom: 10px;

    .el-input {
      height: 38px;

      .el-input__wrapper {
        background-color: #d7d7d7;
      }
    }
  }

  .simple_div {
    .welcome_div {
      display: inline-block;
      height: 28px;
      background: rgba(0, 0, 0, 0.3);
      box-shadow:
        inset 9px 9px 20px 0px rgba(255, 255, 255, 0.05),
        inset -9px -9px 20px 0px rgba(255, 255, 255, 0.05);
      border-radius: 225px 225px 225px 225px;
      padding: 0 20px;
      line-height: 28px;
      margin: 3px 0;

      .welcome_span {
        color: #ffffff;
      }

      .user_span {
        color: #83e0ff;
        margin: 0 5px;
      }
    }
  }

  .tips_div {
    width: 100%;
    padding: 10px;

    span {
      color: #83e0ff;
      font-size: 12px;
    }
  }
}
</style>
